import React, { useState, useEffect } from 'react'
import {
    Toast, NavBar,
} from 'react-vant';
import { useNavigate, useLocation } from 'react-router-dom';
import '../../scss/sdk/addall.scss'
import { Arrow } from '@react-vant/icons';
import { Input, Cascader, DatePicker, Radio, Checkbox, Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { hooks, Uploader } from 'react-vant'
import axios from 'axios';
import { addaa } from '../../store/Num';


const children = [
    {
        value: 4,
        label: '4层',
    },
    {
        value: 5,
        label: '5层',
    },
    {
        value: 6,
        label: '6层',
    },
    {
        value: 7,
        label: '7层',
    },
    {
        value: 8,
        label: '8层',
    },
    {
        value: 9,
        label: '9层',
    },
    {
        value: 10,
        label: '10层',
    },
    {
        value: 11,
        label: '11层',
    },
    {
        value: 12,
        label: '12层',
    },
    {
        value: 13,
        label: '13层',
    },
    {
        value: 14,
        label: '14层',
    },
    {
        value: 15,
        label: '15层',
    },
    {
        value: 16,
        label: '16层',
    },
    {
        value: 17,
        label: '17层',
    },
    {
        value: 18,
        label: '18层',
    },
    {
        value: 19,
        label: '19层',
    },
    {
        value: 20,
        label: '20层',
    }

];
export default function AddAll() {
    let dispatch = useDispatch()
    let Location = useLocation()
    let Navigate = useNavigate()
    //////////前段数据
    const options = [
        {
            value: 1,
            label: '1层',
            children: children,
        },
        {
            value: 2,
            label: '2层',
            children: children,
        },
        {
            value: 3,
            label: '3层',
            children: children,
        },
        {
            value: 4,
            label: '4层',
            children: children,
        },
        {
            value: 5,
            label: '5层',
            children: children,
        },
        {
            value: 6,
            label: '6层',
            children: children,
        },
        {
            value: 7,
            label: '7层',
            children: children,
        },
        {
            value: 8,
            label: '8层',
            children: children,
        },
        {
            value: 9,
            label: '9层',
            children: children,
        },
        {
            value: 10,
            label: '10层',
            children: children,
        },
        {
            value: 11,
            label: '11层',
            children: children,
        },
        {
            value: 12,
            label: '12层',
            children: children,
        },
        {
            value: 13,
            label: '13层',
            children: children,
        },
        {
            value: 14,
            label: '14层',
            children: children,
        },
        {
            value: 15,
            label: '15层',
            children: children,
        },
        {
            value: 16,
            label: '16层',
            children: children,
        },
        {
            value: 17,
            label: '17层',
            children: children,
        },
        {
            value: 18,
            label: '18层',
            children: children,
        },
        {
            value: 19,
            label: '19层',
            children: children,
        },
        {
            value: 20,
            label: '20层',
            children: children,
        }
    ];
    const options1 = useSelector((state) => state.Num.options1)
    const [btns, setBtns] = useState([
        { name: '冰箱', flag: false, }, { name: '洗衣机', flag: false, }, { name: '热水器', flag: false, },
        { name: '宽带', flag: false, }, { name: '油烟机', flag: false, }, { name: '燃气炉', flag: false, },
        { name: '沙发', flag: false, }, { name: '微波炉', flag: false, }, { name: '电磁炉', flag: false, },
        { name: '餐桌', flag: false, }, { name: '电视', flag: false, }, { name: '橱柜', flag: false, },
        { name: '空调', flag: false, }, { name: '衣柜', flag: false, },
        { name: '床', flag: false, }, { name: '卫生间', flag: false, }, { name: '智能门锁', flag: false, },
        { name: '阳台', flag: false, }, { name: '暖气', flag: false, }, { name: '书桌', flag: false, },
    ])
    /////////





    //表单数据
    const [state, updateState] = hooks.useSetState({
        classfy: '整租',
        city: Location.state ? Location.state.text : '',//城市
        plot: '',//小区名称
        price: '',//每月租金
        house_type: '',//房型
        house_area: '',//房屋面积
        house_floor: 0,//所在楼层  
        house_direction: '',//房屋朝向
        lid: localStorage.getItem('_id') ? localStorage.getItem('_id') : '665db2daf793db849f33b899',//房东id
        tip: [],//家具陈设
        is_reservation: '',//是否预约
        viewing_time: '',
        house_photo: './酒店7.webp',
    })
    let [sdk_flag, setsdk_flag] = useState(false)//是否同意承诺书

    //处理副作用
    useEffect(() => {
        let copy = state.tip
        copy = btns.filter((item) => item.flag === true).map((item) => item.name)
        updateState({ tip: copy })
    }, [btns])

    //单选
    // const [value, setValue] = useState(1);
    const sdkRadio = (e) => {
        console.log('是否预约', e.target.value);
        updateState({ is_reservation: e.target.value })
    };
    const chaoxiang = (e) => {
        console.log('房屋朝向', e.target.value);
        updateState({ house_direction: e.target.value })
    };

    //承诺书选择
    const sdkChecked = (e) => {
        console.log(`checked = ${e.target.checked}`);
        setsdk_flag(e.target.checked)
    };

    //看房时间
    const skdDate = (date, dateString) => {
        updateState({ viewing_time: dateString })
    };
    // 房型选择
    let fangxing = (value) => {
        console.log(value);
        updateState({ house_type: value.join('/') })
    }
    // 楼层选择
    let louceng = (value) => {
        updateState({ house_floor: value[1] })
    }

    //修改家具陈设的状态
    let upditem = (name) => {
        setBtns(btns.map((item) => {
            if (item.name === name) {
                return {
                    ...item,
                    flag: !item.flag
                }
            } else {
                return item
            }
        }))
    }

    //添加数据
    let addAll = async () => {
        let obj = {
            ...state,
            name: state.city + state.plot,
        }
        let { data } = await axios.post('http://localhost:3000/sdk/sdkAddall', obj)

        // console.log(data);



        updateState({
            classfy: '整租',
            city: Location.state ? Location.state.text : '',//城市
            plot: '',//小区名称
            price: '',//每月租金
            house_type: '',//房型
            house_area: '',//房屋面积
            house_floor: 0,//所在楼层  
            house_direction: '',//房屋朝向
            lid: localStorage.getItem('_id') ? localStorage.getItem('_id') : '665db2daf793db849f33b899',//房东id
            tip: [],//家具陈设
            is_reservation: '',//是否预约
            viewing_time: '',
        })
        Navigate('/myhomes4')
    }

    //图片上传
    const upload = async (file) => {
        if (file.length > 0) {
            const formData = new FormData()
            formData.append('file', file[0].file)
            // 发送POST请求，如果请求成功执行修改头像操作
            let { data } = await axios.post('http://127.0.0.1:3000/lxj/upload', formData)
            updateState({
                house_photo: data.path
            })
            console.log(data.path)
        }
    }

    //图片上传

    return (
        <div className='addall'>
            <div style={{
                position: 'sticky',
                top: '0',
                backgroundColor: 'white',
                zIndex: '100',
            }}>
                <NavBar
                    title="整租发布"
                    onClickLeft={() => { Navigate('/sdk') }}
                />
            </div>
            <div>
                {/* 头 */}
                <div className='sdkadd-head'>
                    <img src="./sdk1.png" style={{
                        width: '100%',
                    }} alt='' />
                    <div style={{
                        lineHeight: "40px",
                        marginLeft: '14px',
                        fontSize: '15px',
                    }}>
                        房源基础信息
                    </div>
                </div>
                {/* 表单数据 */}
                <div>
                    <div className='sdkaddbox1'>
                        {/* 所在城市 */}
                        <div className='sdkaddbox1-1'>
                            <div className='sdkaddbox1-1-1'>所在城市</div>
                            <div style={{
                                width: '200px',
                                height: '50px',
                                backgroundColor: '#F5F5F5',
                                borderRadius: '10px',
                                paddingLeft: '10px',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                            }}
                                onClick={() => { Navigate('/city', { state: { num: 1 } }) }}
                            >
                                <span>
                                    {state.city ? state.city : '请选择'}
                                </span>
                                <Arrow style={{
                                    marginLeft: '50px',
                                }} />
                            </div>
                        </div>
                        {/* 小区名称 */}
                        <div className='sdkaddbox1-1'>
                            <div className='sdkaddbox1-1-1'>小区名称/地址
                                <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                            </div>
                            <div>
                                <Input
                                    style={{
                                        width: '211px',
                                        height: '50px',
                                        backgroundColor: '#F5F5F5',
                                        borderRadius: '10px',
                                        paddingLeft: '10px',
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        border: 'none'
                                    }} placeholder="请输入小区名称/地址"
                                    value={state.plot}
                                    onChange={plot => updateState({ plot: plot.target.value })}
                                />
                            </div>
                        </div>
                        {/* 整套面积 */}
                        <div className='sdkaddbox1-1'>
                            <div className='sdkaddbox1-1-1'>整套面积
                                <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                            </div>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                            }}>
                                <Input
                                    style={{
                                        width: '162px',
                                        height: '50px',
                                        backgroundColor: '#F5F5F5',
                                        borderRadius: '10px',
                                        paddingLeft: '10px',
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                        border: 'none'
                                    }} placeholder="请输入房屋面积"
                                    value={state.house_area}
                                    onChange={house_area => updateState({ house_area: house_area.target.value })}
                                />
                                <span style={{ color: '#999999' }}>平方米</span>
                            </div>



                        </div>
                        {/* 楼层|总楼层*/}
                        <div className='sdkaddbox1-1'>
                            <div className='sdkaddbox1-1-1'>楼层/总楼层
                                <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                            </div>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                            }}>
                                <Cascader
                                    defaultValue={['3层', '20层']}
                                    options={options} onChange={louceng}
                                    expandTrigger="hover"
                                    style={{
                                        width: '210px',
                                        height: '50px',
                                    }}
                                />
                            </div>
                        </div>
                        {/* 房型 */}
                        <div className='sdkaddbox1-1'>
                            <div className='sdkaddbox1-1-1'>房型
                                <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                            </div>
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                            }}>
                                <Cascader
                                    defaultValue={['两室', '两厅', '两卫']}
                                    options={options1} onChange={fangxing}
                                    expandTrigger="hover"
                                    style={{
                                        width: '210px',
                                        height: '50px',
                                    }}
                                />
                            </div>
                        </div>
                        {/* 房屋朝向 */}
                        <div className='sdkaddbox1-2'>
                            <div className='sdkaddbox1-1-1'>
                                房屋朝向
                                <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                            </div>
                            <div>
                                <Radio.Group onChange={chaoxiang} value={state.house_direction}>
                                    <Radio value={'东'}>东</Radio>
                                    <Radio value={'南'}>南</Radio>
                                    <Radio value={'西'}>西</Radio>
                                    <Radio value={'北'}>北</Radio>
                                </Radio.Group>
                            </div>
                        </div>
                    </div>
                    {/* 房屋内家具 */}
                    <div className='btns'>
                        {
                            btns.map((item, index) => {
                                return (

                                    <button
                                        key={index}
                                        className='butitem'
                                        id={item.flag ? 'active' : ''}
                                        onClick={() => {
                                            upditem(item.name)
                                        }}
                                    >
                                        {item.name}
                                    </button>
                                )
                            })
                        }
                    </div>
                </div>
            </div>

            {/* 看房信息 */}
            <div
                style={{
                    width: '100%',
                    backgroundColor: '#fff',
                    marginTop: '15px',

                }}>

                {/* 图片上传 */}
                <div className='sdkaddbox1-2'>

                    <div className='sdkaddbox1-1-1'>
                        房屋照片
                        <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                    </div>
                    <div style={{
                        marginRight: '80px',
                        marginTop: '25px',
                    }}>
                        <Uploader
                            Value={state.house_photo}
                            maxCount={1}
                            action='http://127.0.0.1:3000/lxj/upload'
                            onChange={(e) => upload(e)}
                        />
                    </div>
                </div>

                {/* 看房时间 */}
                <div className='sdkaddbox1-2'>
                    <div className='sdkaddbox1-1-1'>
                        看房时间
                        <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                    </div>
                    <div style={{
                        width: '200px',
                        height: '50px',
                        backgroundColor: '#F5F5F5',
                        borderRadius: '10px',
                        paddingLeft: '10px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                    }}
                    >
                        <DatePicker onChange={skdDate}
                            style={{
                                width: '100%',
                                border: 'none',
                                backgroundColor: '#F5F5F5',
                            }}
                        />
                        <Arrow style={{
                            marginLeft: '50px',
                        }} />
                    </div>
                </div>

                {/* 预约看房 */}
                <div className='sdkaddbox1-2'>
                    <div className='sdkaddbox1-1-1'>
                        预约看房
                    </div>
                    <div>
                        <Radio.Group onChange={sdkRadio} value={state.is_reservation}>
                            <Radio value={true}>可以预约</Radio>
                            <Radio value={false}>不可预约</Radio>

                        </Radio.Group>
                    </div>
                </div>


                {/* 每月租金 */}
                <div className='sdkaddbox1-2'>
                    <div className='sdkaddbox1-1-1'>
                        租金/月
                        <sup style={{ color: 'red', fontSize: '15px' }}>*</sup>
                    </div>
                    <div>
                        <Input
                            style={{
                                width: '211px',
                                height: '50px',
                                backgroundColor: '#F5F5F5',
                                borderRadius: '10px',
                                paddingLeft: '10px',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                                border: 'none'
                            }} placeholder="请输入租金/月"
                            value={state.price}
                            onChange={price => updateState({ price: price.target.value })}
                        />
                    </div>
                </div>

            </div>
            {/* 提交按钮 */}
            <div style={{
                width: '100%',
                backgroundColor: '#fff',
                position: 'sticky',
                bottom: '0',
                textAlign: 'center',
                zIndex: '100',
                paddingBottom: '8px'
            }}>
                <div>
                    <Checkbox onChange={sdkChecked}
                        checked={sdk_flag}
                        style={{
                            fontSize: '11px',
                        }}>我承诺房源真实并同于《个人用户租房服务协议》</Checkbox>
                    <Button
                        style={{
                            marginTop: '5px',
                            backgroundColor: 'orange',
                            width: '80%',
                            height: '40px',
                            color: 'white',
                            fontSize: '16px',
                        }}
                        onClick={() => { addAll() }}
                        disabled={sdk_flag ? false : true}

                    >提&nbsp;&nbsp;&nbsp;&nbsp;交</Button>
                </div>
            </div>
        </div >
    )
}
